<template>
  <div class="wrapper">
    <!--  这个可以传入图标 -->
    <SketchRule
      :thick="state.thick"
      :scale="state.scale"
      :width="580"
      :height="580"
      :start-x="state.startX"
      :start-y="state.startY"
      :shadow="shadow"
      :startNumX="0"
      :endNumX="600"
      :startNumY="0"
      :endNumY="320"
      :isShowReferLine="state.isShowReferLine"
      @onCornerClick="handleCornerClick"
      :lines="state.lines"
    />
    <div id="screens" ref="screensRef" @wheel="handleWheel" @scroll="handleScroll">
      <div ref="containerRef" class="screen-container">
        <div id="canvas" :style="canvasStyle"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">

import { defineComponent, ref, onMounted, onUnmounted, reactive, computed, nextTick } from 'vue';
import SketchRuler from 'vue3-sketch-ruler'
import 'vue3-sketch-ruler/lib/style.css'


export default defineComponent({
  name: 'UserRuler',
  components: {
    SketchRuler
  },
  setup () {
    //*********************************************************
    //                    标尺
    //*********************************************************
    const rectWidth = 600;
    const rectHeight = 320;
    const screensRef = ref<HTMLElement | null>(null);
    const containerRef = ref<HTMLCanvasElement | null>(null);

    let state = reactive({
      scale: 0.75, //658813476562495, //1,
      startX: 0,
      startY: 0,
      lines: {
        h: [433, 588],
        v: [33, 143]
      },
      palette: {
        bgColor: '#181b24', // ruler bg color
        longfgColor: '#BABBBC', // ruler longer mark color
        shortfgColor: '#9C9C9C', // ruler shorter mark color
        fontColor: '#DEDEDE', // ruler font color
        shadowColor: '#525252', // ruler shadow color
        lineColor: '#EB5648',
        borderColor: '#B5B5B5',
        cornerActiveColor: '#fff'
      },
      thick: 20,
      isShowRuler: true, // 显示标尺
      isShowReferLine: false // 显示参考线
    });

    let shadow = computed(() => {
      return {
        x: 0,
        y: 0,
        width: rectWidth,
        height: rectHeight
      }
    })

    let canvasStyle = computed(() => {
      return {
        width: rectWidth,
        height: rectHeight,
        transform: `scale(${state.scale})`
      }
    })

    const handleScroll = () => {
      const screensRect = screensRef.value?.getBoundingClientRect()
      const canvasRect = (containerRef.value as HTMLCanvasElement)?.getBoundingClientRect()

      // 标尺开始的刻度
      if ((screensRect) && (canvasRect)) {
        const startX = (screensRect.left + state.thick - canvasRect.left) / state.scale;
        const startY = (screensRect.top + state.thick - canvasRect.top) / state.scale;
        state.startX = startX;
        state.startY = startY;
        alert('ok');
      }
    }

    const handleCornerClick = (e: any) => {
      console.log('handleCornerClick', e);
    }

    // 控制缩放值
    const handleWheel = (e: {
      ctrlKey: any,
      metaKey: any,
      preventDefault: () => void,
      deltaY: number
    }) => {
      if (e.ctrlKey || e.metaKey) {
        e.preventDefault();
        const nextScale = parseFloat(Math.max(0.2, state.scale - e.deltaY / 500).toFixed(2));
        state.scale = nextScale;
      }

      nextTick(() => {
        handleScroll();
      });
    }

    const showLineClick = () => {
      state.isShowReferLine = !state.isShowReferLine
      console.log(state.isShowReferLine, 'state.isShowReferLine')
    }


    //加载组件
    onMounted(() => {
      // 滚动居中
      if ((screensRef.value) && (containerRef.value)) {
        (screensRef.value as HTMLElement).scrollLeft = (containerRef.value as HTMLElement).getBoundingClientRect().width / 2 - 400;
      }
    });

    //卸载组件
    onUnmounted(() => {

    });

    return {
      state,
      shadow,
      canvasStyle,

      handleScroll,
      handleCornerClick,
      handleWheel,
      showLineClick
    };
  }
});
</script>

<style lang="scss" scoped>
  .top {
    position: absolute;
    left: 0px;
    font-size: 20px;
  }

  .right {
    top: 200px;
    position: absolute;
    left: 0px;
    font-size: 20px;
  }
  body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-family: sans-serif;
  }

  body * {
    box-sizing: border-box;
    user-select: none;
  }

  .wrapper {
    position: absolute;
    top: 50px;
    left: 60px;
    /* 特别注意,这个width要和传入组件的width成对应关系,
     也就是 780width +thick20 =800
     否则影子不和容器搭配,这个在2X中会进行自动匹配修正,省得配置麻烦
      */
    width: 600px;
    height: 600px;
    background-color: #ec5757;
    border: 1px solid #dadadc;
  }

  #screens {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: auto;
    border-width: 1px;
  }

  .screen-container {
    position: absolute;
    width: 5000px;
    height: 3000px;
    background: #F2C037;
  }

  .scale-value {
    position: absolute;
    bottom: 100%;
    left: 0;
  }

  .button {
    position: absolute;
    bottom: 100%;
    left: 100px;
  }

  #canvas {
    position: absolute;
    top: 80px;
    left: 50%;
    width: 600px;
    height: 320px;
    background-size: 100% 100%;
    transform-origin: 50% 0;
  }
</style>
